<script src="../ExternalLibrary/js/vue.js"></script>

<!-----------------------------01.花括号中使用表达式 start---------------------------->
<fieldset>
    <legend>生效模型</legend>
    <p>{{2+1}}</p>
    <p>{{true?'YES':'No'}}</p>
    <p>{{"helloworld".split('').reverse().join('')}}</p>
    <p v-bind:id="'list-'+id"></p>
</fieldset>
<!-----------------------------01.花括号中使用表达式 end---------------------------->


<!------ Mustache语法中只能是单个表达式 ----->
<!-----------------------------start---------------------------->
<fieldset>
    <legend>01.&lt;p&gt;{{numer+1}}&lt;/p&gt;</legend>
    <p id="number">{{number+1}}</p>
    <script>
        var oVue1 = new Vue({
            el:"#number",
            data:{
                number:25
            }
        });
    </script>
</fieldset>
<!-----------------------------end---------------------------->

<!-----------------------------start---------------------------->
<fieldset>
    <legend>02.&lt;p&gt;{{flag?'YES':'No'}}&lt;/p&gt;</legend>
    <p id="flag">{{flag?'YES':'No'}}</p>
    <script>
        var oVue2 = new Vue({
            el:'#flag',
            data:{
                flag:false
            }
        })
    </script>
</fieldset>
<!-----------------------------end---------------------------->

<!-----------------------------start---------------------------->
<fieldset>
    <legend>03.&lt;p&gt;{{message.split('').reverse().join('')}}&lt;/p&gt;</legend>
    <p id="function">{{message.split('').reverse().join('')}}</p>
    <p>{{"helloworld".split('').reverse().join('')}}</p><!--这个不会生效,为什么呢?我猜时因为他没有交给vue管理-->
    <script>
        var oVue3 = new Vue({
            el:"#function",
            data:{
                message:"helloworld"
            }
        })
    </script>
</fieldset>
<!-----------------------------end---------------------------->

<!-----------------------------start---------------------------->
<fieldset>
    <legend>04.&lt;p v-bind:title="'list-'+id"&gt;&lt;/p&gt;</legend>
    <p id="bind" v-bind:title="'list-'+id">chage title</p>
    <script>
        var oVue4 = new Vue({
            el:"#bind",
            data:{
                id:"this_id"
            }
        })
    </script>
</fieldset>
<!-----------------------------end---------------------------->

<fieldset>
    <legend>不生效模型</legend>
    <p>{{var a =1}}</p><!--这是语句不是表达式-->
    <p>{{if(ok){return message}}}</p><!--流程控制也不会生效,请使用三元表达式-->
</fieldset>